<template>
  <tui-navigation-bar
    :isOpacity="false"
    @init="initNavigation"
    @change="opacityChange"
    :isFixed="false"
    :scrollTop="scrollTop"
    title="排班信息"
    isCustom
    backgroundColor="#fff"
    color="#333"
  >
    <view class="tui-header-icon" :style="{ marginTop: top + 'px' }">
      <tui-icon name="arrowleft" color="#333" @click="back"></tui-icon>
    </view>
    <view class="tui-header-title"> 排班信息 </view>
  </tui-navigation-bar>
  <view class="viewport">
    <view class="viewport-container">
      <tui-tabs
        :tabs="tabs"
        color="#666666"
        :width="TabWidth"
        :padding="0"
        selectedColor="#26C493"
        sliderBgColor="#26C493"
        :currentTab="currentTab"
        @change="change"
      >
      </tui-tabs>
      <!-- tab -->
      <view class="scroll-view" v-show="currentTab === 0">
        <scroll-view v-show="currentTab === 0" scroll-x>
          <view
            :class="{
              'scroll-view-item': true,
              all: true,
              active: activeIndex === 0,
            }"
            @click="activeIndex = 0"
          >
            <view>全部</view>
            <view>日期</view>
          </view>
          <view
            :class="{
              'scroll-view-item': true,
              no_active: !item.isTrue,
              active: activeIndex === index + 1,
            }"
            v-for="(item, index) of asyncData"
            @click="handleActive(index, item)"
            :key="index"
          >
            <view class="date">{{ item.date }}</view>
            <view class="date-num">{{ item.dateNum }}</view>
            <view class="isTrue">{{ item.isTrue ? '有号' : '无排班' }}</view>
          </view>
        </scroll-view>
      </view>
    </view>
    <!-- change -->
    <view v-show="currentTab === 0">
      <scroll-view scroll-y :style="{ height: filtrateHeight }">
        <view v-for="item of 5" :key="item">
          <view style="height: 16rpx; background-color: #f5f5f5"></view>
          <!-- card -->
          <my-cardinfo></my-cardinfo>
        </view>
      </scroll-view>
    </view>
    <view v-show="currentTab !== 0">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aspernatur
      doloremque ipsum et sunt quae quasi ut a deserunt consectetur ipsam
      veritatis eligendi, alias modi architecto ullam, distinctio similique
      minus aliquid!
    </view>
  </view>
</template>

<script lang="js" setup>
import { ref, reactive, getCurrentInstance, computed } from 'vue'
import useTemplateInfo from '@/hooks/useTemplateInfo'
import useNavBar from '@/pages/index/hooks/nav-bar'
import useScrollView from './hooks/useScrollView'
const instance = getCurrentInstance();
const { initNavigation, opacityChange, scrollTop, top, back } = useNavBar()
const {  width: TabWidth, bottom, screenHeight } = useTemplateInfo(ref({
  instance,
  class: '.viewport-container'
}))

const {asyncData} = useScrollView()
const currentTab = ref(0)
const activeIndex = ref(0)
const tabs = reactive([ {
  			name: "排班信息"
  		}, {
  			name: "科室简介"
  		}])

const filtrateHeight = computed(() => {
  const height = screenHeight.value - bottom.value
  if(!height) return 'max-content'
  return height - 20 + 'px'
})
const change = (e) => {
  currentTab.value = e.index
}

const handleActive = (i, item) => {
  if(item.isTrue) {
    activeIndex.value = i + 1;
  } else {
    uni.showToast({
      title: '当前日期无排班!',
      icon: 'error'
    })
  }
}
</script>

<style lang="scss" scoped>
.viewport {
  box-sizing: border-box;
  background-color: #ffffff;
  &-container {
    margin: 0 30rpx;
  }

  .scroll-view {
    padding-top: 16rpx;
    padding-bottom: 16rpx;
    white-space: nowrap;
  }

  .scroll-view-item {
    vertical-align: top;
    box-sizing: border-box;
    display: inline-block;
    text-align: center;
    padding: 12rpx 20rpx;
    color: #333333;
    background: #f5f5f7;
    width: 124rpx;
    height: 136rpx;
    margin-right: 16rpx;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 32rpx;

    .date {
      font-size: 28rpx;
    }
    .date-num {
      font-size: 32rpx;
      padding: 8rpx 0;
    }
    .isTrue {
      font-size: 24rpx;
    }
    &.all {
      padding: 36rpx 34rpx;
    }
    &.active {
      color: #26c493;
      background: #ebfff9;
      border-radius: 8rpx;
      border: 1px solid #26c493;
    }
    &.no_active {
      background: #f5f5f7;
      color: #999999;
    }
  }
}
page {
  background: #ffffff;
}
</style>
